<template>
	<div class="answer_question_content_container">
		<el-dialog title="" :visible.sync="show" center @closed="closeDialog()" :title="title">
			<div class='question-content'>
				<div v-for="item in data" class="question-content-item">
					<div v-if="editFlag">
						<el-checkbox size="medium" v-model="item.isSel" v-if="item.isEditor" disabled @change="changeChoose()">{{item.childrenName}}</el-checkbox>
						<el-checkbox size="medium" v-model="item.isSel" v-else @change="changeChoose()">{{item.childrenName}}</el-checkbox>
					</div>
					<div v-else class="question-content-item-title">
						<i v-if="item.isSel" class="el-icon-check"></i>
						<i v-else class="el-icon-close"></i> {{item.childrenName}}
					</div>
					<div v-if="item.extDesc" class="question-content-desc">{{item.extDesc}}</div>
					<div v-if="item.isHasFile" class="downfile-div" @click="editFlag && downFile(item)">
						<div class="downfile-div-icon"></div>
						<label class="downfile-div-label">资料下载</label>
					</div>
					<div v-if="!editFlag && item.isHasFile && !item.downTime" class="downfile-time">{{item.downTime}}</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
         <el-button v-if="showCommitBtn && hasApi('passGameSave')" class="commit-btn" type="primary" @click="commitResult()">提交</el-button>
         <el-button class="cancle-btn" type="primary" @click="show = false">取消</el-button>
      </span>
		</el-dialog>
	</div>
</template>
<script>
	var vm;
	export default {
		components: {},
		data: function() {
			return {
				show: false,
				title: "",
				showCommitBtn: false,
				editFlag: false,
				data: [],
			}
		},
		methods: {
			init: function(data, title, editFlag) {
				vm.show = true;
				vm.title = title;
				vm.data = data;
				vm.editFlag = editFlag;

				if(editFlag) {
					for(let i = 0; i < this.data.length; i++) {
						if(!this.data[i].isSel) {
							this.showCommitBtn = true;
						}
					}
				}
			},
			closeDialog: function() {
				this.show = false;
			},
			changeChoose: function(event) {},
			downFile: function(item) {
				// location.href = 'http://106.12.150.217:30805/alphakids/static'+ "/" + urlPath;
				// return;

				axios({
					method: 'get',
					url: config.baseUrl + "/" + item.hasFileUrl,
					// url: 'http://106.12.150.217:30805/alphakids/static' + "/" + urlPath,
					data: {},
					responseType: 'blob'
				}).then(response => {

					const blob = new Blob([response], {
						type: response.data.type
					});
					if(window.navigator.msSaveOrOpenBlob) {
						// 兼容IE10
						// console.log(1)
						window.navigator.msSaveOrOpenBlob(blob, item.hasFileUrl);

						// vm.openDownDialog(urlPath);
					} else {
						//  chrome/firefox
						let url = window.URL.createObjectURL(response.data);
						let link = document.createElement('a');
						link.style.display = 'none';
						link.href = url;

						link.setAttribute('download', item.hasFileUrl);
						document.body.appendChild(link);
						link.click();
						URL.revokeObjectURL(link.href);
						link.remove();
						// vm.openDownDialog(urlPath);
					}

					let downFileTime = {
						userId: vm.$parent.passGameInfo.userId,
						itemId: item.childrenId,
						// downTime: tool.DateToString(new Date(), "yyyy-MM-dd HH:mm:ss")
					};
					//保存下载时间
					api.questionFileDownTime(downFileTime).then(function(data) {
						console.log(downFileTime);
					});

				}).catch((error) => {

				})
			},
			commitResult: function() {
				let titleSet = [];

				for(let item in this.data) {
					if(this.data[item].isSel)
						titleSet.push(this.data[item].childrenId);
				}
				this.$parent.commitResult(titleSet);
				this.show = false;
			}
		},
		created: function() {
			vm = this;
		}
	}
</script>
<style lang="scss">
	.answer_question_content_container {
		.el-dialog {
			width: 11.84rem;
			height: 7.70rem;
			background-color: #ffffff;
			border-radius: 0.16rem;
			box-shadow: 0rem 0rem 0.20rem 0rem rgba(100, 162, 255, 0.5);
		}
		.el-dialog__header {
			background-color: #64a2ff;
			height: 0.6rem;
			border-top-left-radius: 0.16rem;
			border-top-right-radius: 0.16rem;
			font-size: 0.22rem;
			font-weight: normal;
			font-stretch: normal;
			line-height: 0.3rem;
			letter-spacing: 0rem;
			color: #ffffff;
		}
		.el-dialog__headerbtn .el-dialog__close {
			color: #ffffff;
			width: 0.18rem;
			height: 0.18rem;
		}
		.el-dialog__title {
			font-size: 0.22rem;
			font-weight: normal;
			font-stretch: normal;
			line-height: 0.30rem;
			letter-spacing: 0rem;
			color: #ffffff;
		}
		.el-dialog__body {
			padding: 0rem 0 !important;
		}
		.el-dialog__footer {
			position: relative;
			bottom: 0rem;
		}
		.el-checkbox__input {
			margin-top: -0.05rem;
		}
		.el-checkbox__input .el-checkbox__inner {
			width: 0.2rem;
			height: 0.2rem;
		}
		.el-checkbox__input.is-checked .el-checkbox__inner {
			background-color: rgb(56, 133, 248);
		}
		.el-checkbox__inner::after {
			left: 0.04rem;
			top: 0rem;
			width: 0.07rem;
			height: 0.12rem;
		}
		.el-checkbox__label {
			font-size: 0.2rem;
			display: inline-grid;
			white-space: pre-wrap;
			line-height: 0.3rem;
			color: #333333;
		}
		.is-checked .el-checkbox__label {
			color: rgb(102, 102, 102);
		}
	}
</style>
<style scoped>
	.answer_question_content_container {
		/*  background-color: #f3f6fb;
  min-height: 100%;*/
	}
	
	.question-title {
		position: absolute;
		top: 0rem;
		margin: 0 auto;
	}
	
	.question-content {
		padding: 0.26rem 0.3rem;
		height: 6.4rem;
		overflow: auto;
	}
	
	.question-content-item {
		padding-bottom: 0.4rem;
	}
	
	.question-content-item-title {
		font-size: 0.2rem;
		display: inline-block;
		line-height: 0.3rem;
		color: #333333;
	}
	
	.question-content-desc {
		background-color: #fef5e1;
		border-radius: 0.10rem;
		position: relative;
		margin: 0.09rem 0.3rem;
		font-size: 0.18rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 0.27rem;
		letter-spacing: 0rem;
		color: #3e2a21;
		padding: 0.16rem 0.18rem;
		white-space: pre-line;
	}
	
	.downfile-div {
		position: relative;
		width: 1.13rem;
		height: 0.30rem;
		background-color: #d7e7ff;
		border-radius: 0.15rem;
		margin: 0px auto 0px auto;
		margin-right: 0.3rem;
	}
	
	.downfile-div-icon {
		display: inline-block;
		width: 0.18rem;
		height: 0.14rem;
		background-image: url(../../../assets/img/answer_system/down_icon.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 100% 100%;
		position: relative;
		left: 0.16rem;
		top: -0.04rem;
	}
	
	.downfile-div-label {
		display: inline-block;
		position: relative;
		font-size: 0.16rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 0.37rem;
		letter-spacing: 0rem;
		color: #3887fe;
		left: 0.16rem;
		top: -0.04rem;
	}
	
	.downfile-time {
		width: 1.73rem;
		position: relative;
		font-size: 0.14rem;
		color: #666666;
		line-height: 0.3rem;
		text-align: center;
		margin: 0px auto 0px auto;
		margin-right: 0rem;
	}
	
	.commit-btn,
	.cancle-btn {
		position: relative;
		margin: 0 auto;
		display: inline-block;
		font-size: 0.16rem;
		color: white;
		width: 1.60rem;
		height: 0.40rem;
		background-color: #2870ff;
		border-radius: 0.04rem;
	}
	
	.cancle-btn {
		background-color: #ffffff;
		border: solid 0.01rem #dcdfe6;
		color: #666666;
	}
	/*滚动条样式*/
	
	.question-content::-webkit-scrollbar {
		width: 0.1rem;
	}
	
	.question-content::-webkit-scrollbar-thumb {
		border-radius: 0.5rem;
		background: #BBBBBB;
	}
	
	.question-content::-webkit-scrollbar-track {
		background: #F2F6FC;
	}
</style>